<template>
	<view>
		<c-sign ref="cSign"  :lineColor="lineColor" :lineWidth="lineWidth" :bgColor='bgColor'></c-sign>
		<view class="content">
			<view>画笔设置</view>
			<view class="btnBox">
				<button @click="lineColor='#000000'" size="mini">黑色画笔</button>
				<button @click="lineColor='#f44'" size="mini">红色画笔</button>
				<button @click="lineWidth=4" size="mini">画笔粗4</button>
				<button @click="lineWidth=8" size="mini">画笔粗8</button>
			</view>
			<view>画布设置</view>
			<view class="btnBox">
				<button @click="bgColor='#fff'" size="mini">白色背景</button>
				<button @click="bgColor='#9cd8ff'" size="mini">蓝色背景</button>
				<button @click="thumb='',$refs.cSign.clear()" size="mini">清空画布</button>
				<button @click="save()" size="mini">保存为图片</button>
			</view>
		</view>
		<image :src="thumb" v-if="thumb" style="width: 750rpx;height: 750rpx;" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor:'#fff',
				lineColor:'#000000',
				lineWidth:4,
				thumb:''
			}
		},
		methods: {
			save(){
				this.$refs.cSign.save().then(res=>{
					console.log(res);
					this.thumb = res.tempFilePath
				}).catch(err=>{
					uni.showToast({
						title:err.errMsg,
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.page{
		width: 100vw;
		overflow-x: hidden;
	}
	.content{
		padding: 20rpx 14rpx;
		font-size: 28rpx;
	}
	.btnBox{
		width: 100%;
		display: flex;align-items: center;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
</style>
